import { createApp, toRaw } from 'vue'
import { createPinia } from 'pinia'
import type { PiniaPluginContext } from 'pinia'
import App from './App.vue'
import router from './router'

import 'element-plus/theme-chalk/el-message.css';
import './assets/css/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
//引入Elmessage和Elloading的css样式文件
// import 'element-plus/theme-chalk/el-loading.css';
// import 'element-plus/theme-chalk/el-message-box.css';
// import 'element-plus/theme-chalk/el-message.css';
// import 'element-plus/theme-chalk/el-table.css';
import "nprogress/nprogress.css";
import { setlocalStorage, getlocalStorage } from "./hooks/operationLocalStorage"

const app = createApp(App)
//字体图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

//pinia插件封装
const piniaPlugin = (coontx: PiniaPluginContext) => {
  const { store } = coontx    //coontx是传进来的pinia，将里面的store结构出来
  //每次初始化去本地获取仓库值  
  let data = getlocalStorage(store.$id)

  //$subscribe当pinia里面的值发生变化会调用该api
  store.$subscribe(() => {
    //将仓库进行存储
    // if(store.$id=='useSongList') 
    setlocalStorage(store.$id, toRaw(store.$state))
  })
  return data

}
let pinia = createPinia()
pinia.use(piniaPlugin)  //挂载pinia插件
app.use(pinia)
app.use(router)



app.mount('#app')
